<template>
  <div id="history">
    <h1>智慧灯杆性能展示</h1>
    <h2>图表</h2>
    <div style="display: flex;">
      <div style="height:200px;width:700px;"
           ref="myEchart_hum">
      </div>
      <div style="height:200px;width:700px;"
           ref="myEchart_tem">
      </div>
      <div style="height:200px;width:700px;"
           ref="myEchart_sunvalue">
      </div>
      <div style="height:200px;width:700px;"
           ref="myEchart_ledvalue">
      </div>
      <div style="height:200px;width:700px;"
           ref="myEchart_rainvalue">
      </div>
    </div>

    <h2>列表</h2>
    <el-table :data="tableData"
              style="width: 100%">
      <!-- <el-table-column prop="led_OnOff"
                       label="路灯开关">
      </el-table-column>
      <el-table-column prop="buzzer_OnOff"
                       label="报警器开关">
      </el-table-column>
      <el-table-column prop="air"
                       label="空气质量">
      </el-table-column>
      <el-table-column prop="ifRain"
                       label="雨况">
      </el-table-column> -->
      <el-table-column prop="time"
                       label="时间">
      </el-table-column> -->
      <el-table-column prop="led_Value"
                       label="路灯亮度">
      </el-table-column>

      <el-table-column prop="tem"
                       label="温度（°C）">
      </el-table-column>
      <el-table-column prop="hum"
                       label="湿度（%）">
      </el-table-column>
      <el-table-column prop="sunValue"
                       label="光线强度（%）">
      </el-table-column>
      <el-table-column prop="rainValue"
                       label="水位（cm）">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'
import echarts from 'echarts'
import qs from 'qs'
export default {
  name: 'History',
  props: {
    msg: String
  },
  mounted: function () {

    // this.initChart();
    this.initChart_hum();
    this.initChart_tem();
    this.initChart_sunvalue();
    this.initChart_ledvalue();
    this.initChart_rainvalue();
    axios.post('/api/getdate', qs.stringify({
      dateType: 'Hum'
    }))
      .then(res => {
        console.log(res);
        // this.tableData.push(res.data);
        // this.hum_data.push(res.data.hum);
        // this.tem_data.push(res.data.tem);
        // this.sunvalue_data.push(res.data.sunValue);
        // this.ledvalue_data.push(res.data.led_Value);
        // let date = new Date();
        // this.timelist.push(date.getMinutes() + '.' + date.getSeconds());
        let timelist = [];
        for (var p in res.data) {
          if (typeof (p) != "function") {
            timelist.push(p)
            this.hum_data.push(res.data[p])
          }
        }
        this.timelist = timelist;
        this.chart_hum.setOption({
          xAxis: [{
            data: timelist
          }],
          series: [{
            data: this.hum_data
          }]
        });
      })

    axios.post('/api/getdate', qs.stringify({
      dateType: 'Tem'
    }))
      .then(res => {
        console.log(res);
        // this.tableData.push(res.data);
        // this.hum_data.push(res.data.hum);
        // this.tem_data.push(res.data.tem);
        // this.sunvalue_data.push(res.data.sunValue);
        // this.ledvalue_data.push(res.data.led_Value);
        // let date = new Date();
        // this.timelist.push(date.getMinutes() + '.' + date.getSeconds());
        let timelist = [];
        for (var p in res.data) {
          if (typeof (p) != "function") {
            timelist.push(p)
            this.tem_data.push(res.data[p])
          }
        }
        this.chart_tem.setOption({
          xAxis: [{
            data: timelist
          }],
          series: [{
            data: this.tem_data
          }]
        });
      })

    axios.post('/api/getdate', qs.stringify({
      dateType: 'sunValue'
    }))
      .then(res => {
        console.log(res);
        // this.tableData.push(res.data);
        // this.hum_data.push(res.data.hum);
        // this.tem_data.push(res.data.tem);
        // this.sunvalue_data.push(res.data.sunValue);
        // this.ledvalue_data.push(res.data.led_Value);
        // let date = new Date();
        // this.timelist.push(date.getMinutes() + '.' + date.getSeconds());
        let timelist = [];
        for (var p in res.data) {
          if (typeof (p) != "function") {
            timelist.push(p)
            this.sunvalue_data.push(res.data[p])
          }
        }
        this.chart_sunvalue.setOption({
          xAxis: [{
            data: timelist
          }],
          series: [{
            data: this.sunvalue_data
          }]
        });
      })

    axios.post('/api/getdate', qs.stringify({
      dateType: 'LED_Value'
    }))
      .then(res => {
        console.log(res);
        // this.tableData.push(res.data);
        // this.hum_data.push(res.data.hum);
        // this.tem_data.push(res.data.tem);
        // this.sunvalue_data.push(res.data.sunValue);
        // this.ledvalue_data.push(res.data.led_Value);
        // let date = new Date();
        // this.timelist.push(date.getMinutes() + '.' + date.getSeconds());
        let timelist = [];
        for (var p in res.data) {
          if (typeof (p) != "function") {
            timelist.push(p)
            this.ledvalue_data.push(res.data[p])
          }
        }
        this.chart_ledvalue.setOption({
          xAxis: [{
            data: timelist
          }],
          series: [{
            data: this.ledvalue_data
          }]
        });
      })

    axios.post('/api/getdate', qs.stringify({
      dateType: 'rainValue'
    }))
      .then(res => {
        console.log(res);
        // this.tableData.push(res.data);
        // this.hum_data.push(res.data.hum);
        // this.tem_data.push(res.data.tem);
        // this.sunvalue_data.push(res.data.sunValue);
        // this.ledvalue_data.push(res.data.led_Value);
        // let date = new Date();
        // this.timelist.push(date.getMinutes() + '.' + date.getSeconds());
        let timelist = [];
        for (var p in res.data) {
          if (typeof (p) != "function") {
            timelist.push(p)
            this.rainvalue_data.push(res.data[p])
          }
        }
        this.chart_rainvalue.setOption({
          xAxis: [{
            data: timelist
          }],
          series: [{
            data: this.rainvalue_data
          }]
        });
      })

    setTimeout(() => {
      for (let i = 0; i < this.timelist.length; i++) {
        this.tableData.push({
          time: this.timelist[i],
          hum: this.hum_data[i],
          tem: this.tem_data[i],
          sunValue: this.sunvalue_data[i],
          led_Value: this.ledvalue_data[i]
        })
      }
    }, 2000)

  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    this.chart.dispose();
    this.chart = null;
  },
  data () {
    return {
      tableData: [],
      chart_hum: null,
      chart_tem: null,
      chart_sunvalue: null,
      chart_ledvalue: null,
      chart_rainvalue: null,
      hum_data: [],
      tem_data: [],
      sunvalue_data: [],
      ledvalue_data: [],
      rainvalue_data: [],
      timelist: []
    }
  },
  methods: {
    initChart_hum () {
      this.chart_hum = echarts.init(this.$refs.myEchart_hum);
      // 把配置和数据放这里
      this.chart_hum.setOption({
        color: ['#3398DB'],
        title: {
          text: '湿度（%）'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: [],
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          type: 'line',
          data: []
        }]
      })
    },
    initChart_tem () {
      this.chart_tem = echarts.init(this.$refs.myEchart_tem);
      // 把配置和数据放这里
      this.chart_tem.setOption({
        color: ['#3398DB'],
        title: {
          text: '温度（°C）'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: [],
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          type: 'line',
          data: []
        }]
      })
    },
    initChart_sunvalue () {
      this.chart_sunvalue = echarts.init(this.$refs.myEchart_sunvalue);
      // 把配置和数据放这里
      this.chart_sunvalue.setOption({
        color: ['#3398DB'],
        title: {
          text: '太阳亮度'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: [],
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          type: 'line',
          data: []
        }]
      })
    },
    initChart_ledvalue () {
      this.chart_ledvalue = echarts.init(this.$refs.myEchart_ledvalue);
      // 把配置和数据放这里
      this.chart_ledvalue.setOption({
        color: ['#3398DB'],
        title: {
          text: '光线强度'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: [],
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          type: 'line',
          data: []
        }]
      })
    },
    initChart_rainvalue () {
      this.chart_rainvalue = echarts.init(this.$refs.myEchart_rainvalue);
      // 把配置和数据放这里
      this.chart_rainvalue.setOption({
        color: ['#3398DB'],
        title: {
          text: '水位（cm）'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: [],
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          type: 'line',
          data: []
        }]
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
